import { defineStore } from "pinia";
import tinycolor from "tinycolor2";
import { omit } from "lodash";
import { Slide, SlideTheme, PPTElement } from "@/types/slides";
import { slides } from "@/mocks/slides";
import { theme } from "@/mocks/theme";
import { layouts } from "@/mocks/layout";
import { useRoute } from 'vue-router'
const route = useRoute()

interface RemoveElementPropData {
  id: string;
  propName: string | string[];
}

interface UpdateElementData {
  id: string | string[];
  props: Partial<PPTElement>;
}

export interface SlidesState {
  theme: SlideTheme;
  slides: Slide[];
  slideIndex: number;
  viewportRatio: number;
  blankArea: Boolean;
}
export const useSlidesStore = defineStore("slides", {
  state: (): SlidesState => ({
    theme: theme, // 主题样式
    slides: slides, // 幻灯片页面数据
    slideIndex: 0, // 当前页面索引
    viewportRatio: 0.56, // 可是区域比例，默认16:9
    blankArea: false, //点击空白处
  }),

  getters: {
    currentSlide(state) {
      if (state.slideIndex === Infinity) {
        return state.slides[0];
      } else {
        return state.slides[state.slideIndex];
      }
    },

    currentSlideAnimations(state) {
      const currentSlide = state.slides[state.slideIndex];
      if (!currentSlide) return null;
      const animations = currentSlide.animations;
      if (!animations) return null;

      const els = currentSlide.elements;
      const elIds = els.map((el) => el.id);
      return animations.filter((animation) => elIds.includes(animation.elId));
    },

    layouts(state) {
      const { themeColor, fontColor, fontName, backgroundColor } = state.theme;

      const subColor = tinycolor(fontColor).isDark()
        ? "rgba(230, 230, 230, 0.5)"
        : "rgba(180, 180, 180, 0.5)";

      const layoutsString = JSON.stringify(layouts)
        .replaceAll("{{themeColor}}", themeColor)
        .replaceAll("{{fontColor}}", fontColor)
        .replaceAll("{{fontName}}", fontName)
        .replaceAll("{{backgroundColor}}", backgroundColor)
        .replaceAll("{{subColor}}", subColor);

      return JSON.parse(layoutsString);
    },
  },

  actions: {
    setTheme(themeProps: Partial<SlideTheme>) {
      this.theme = { ...this.theme, ...themeProps };
    },

    setViewportRatio(viewportRatio: number) {
      this.viewportRatio = viewportRatio;
    },

    setSlides(slides: Slide[]) {
      this.slides = slides;
    },

    addSlide(slide: Slide | Slide[]) {
      const slides = Array.isArray(slide) ? slide : [slide];
      const addIndex = this.slideIndex + 1;
      this.slides.splice(addIndex, 0, ...slides);
      this.slideIndex = addIndex;
    },

    updateSlide(props: Partial<Slide>) {
      const slideIndex = this.slideIndex;
      this.slides[slideIndex] = { ...this.slides[slideIndex], ...props };
    },

    deleteSlide(slideId: string | string[]) {
      const slidesId = Array.isArray(slideId) ? slideId : [slideId];

      const deleteSlidesIndex = [];
      for (let i = 0; i < slidesId.length; i++) {
        const index = this.slides.findIndex((item) => item.id === slidesId[i]);
        deleteSlidesIndex.push(index);
      }
      let newIndex = Math.min(...deleteSlidesIndex);

      const maxIndex = this.slides.length - slidesId.length - 1;
      if (newIndex > maxIndex) newIndex = maxIndex;

      this.slideIndex = newIndex;
      this.slides = this.slides.filter((item) => !slidesId.includes(item.id));
    },

    updateSlideIndex(index: number) {
      this.slideIndex = index;
    },

    addElement(element: PPTElement | PPTElement[]) {
      const elements = Array.isArray(element) ? element : [element];
      const currentSlideEls = this.slides[this.slideIndex].elements;
      const newEls = [...currentSlideEls, ...elements];
      this.slides[this.slideIndex].elements = newEls;
    },

    updateElement(data: UpdateElementData) {
      const { id, props } = data;
      const elIdList = typeof id === "string" ? [id] : id;

      const slideIndex = this.slideIndex;
      const slide = this.slides[slideIndex];
      const elements = slide.elements.map((el) => {
        return elIdList.includes(el.id) ? { ...el, ...props } : el;
      });
      this.slides[slideIndex].elements = elements as PPTElement[];
    },

    removeElementProps(data: RemoveElementPropData) {
      const { id, propName } = data;
      const propsNames = typeof propName === "string" ? [propName] : propName;

      const slideIndex = this.slideIndex;
      const slide = this.slides[slideIndex];
      const elements = slide.elements.map((el) => {
        return el.id === id ? omit(el, propsNames) : el;
      });
      this.slides[slideIndex].elements = elements as PPTElement[];
    },
    /**
     *
     * @remark 协同所需
     * @date 2022-08-11 17:55:44
     * @author chy
     */
    //更新指定页面的元素
    updateIndexElement(index: number, data: UpdateElementData) {
      const { id, props } = data;
      const elIdList = typeof id === "string" ? [id] : id;

      const slideIndex = index;
      const slide = this.slides[slideIndex];
      const elements = slide.elements.map((el) => {
        return elIdList.includes(el.id) ? { ...el, ...props } : el;
      });
      this.slides[slideIndex].elements = elements as PPTElement[];
    },
    // 删除指定元素
    removeElement(index: any, data: any) {
      this.slides[index].elements.splice(data, 1);
    },
    // 删除指定页面
    removeSilde(data: any) {
      // this.slides[this.slideIndex].elements.splice(data, 1);
      this.slides.splice(data, 1);
    },
    addIndexElement(index: number, element: PPTElement | PPTElement[]) {
      const elements = Array.isArray(element) ? element : [element];
      const currentSlideEls = this.slides[index].elements;
      const newEls = [...currentSlideEls, ...elements];
      this.slides[index].elements = newEls;
    },
    addSlideIndex(slide: Slide | Slide[], index: any) {
      const slides = Array.isArray(slide) ? slide : [slide];
      this.slides.splice(index, 0, ...slides);
    },
    updateIndexSlide(index: any, props: Partial<Slide>) {
      this.slides[index] = { ...this.slides[index], ...props };
    },
  },
});
